{layout  name="public:layout" /}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>

<script type="text/javascript" src="/static/ueditor/ueditor.all.min.js"></script>


<!-- 编辑器源码文件 -->


<!--<style>
    ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
    li{list-style-type: none;margin: 5px;padding: 0;}

</style>-->
<style>
    #upload_img_wrap li{
        float:left; /* 往左浮动 */
        list-style-type:none;

    }
</style>
<div class="content">

    <div class="header">

        <h1 class="page-title">Photo</h1>
    </div>

    <ul class="breadcrumb">
        <li><a href="#">Photo</a> <span class="divider">/</span></li>

        <li class="active">多图上传</li>
    </ul>

    <div class="container-fluid">
        <div class="row-fluid">

            <div class="btn-toolbar">
                &nbsp;
                <!--                <a href="#myModal" data-toggle="modal1" class="btn">Delete</a>-->
                <div class="btn-group">
                </div>
            </div>
            <div class="well" style="margin-top: -15px;">
                <!--                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#home" data-toggle="tab">个人信息</a></li>
                                    <li><a href="#profile" data-toggle="tab">修改密码</a></li>
                                </ul>-->
                <div id="myTabContent" class="tab-content">
                    <input type="button" id="j_upload_img_btn" class="inputLong cytp_btn sc_pic fl button bg-blue margin-left" value=" 多图上传"/>
                    
                    <textarea id="content" name="photo" >
                        
                    </textarea>
                    <ul id="upload_img_wrap" style="margin-left: 1px;margin-top: 20px;">
                        
                    </ul>
                    <br/>

                    <br/>
                    <ul id="piclist" class="clearfix">
                    </ul>
                    <div id="mainpic">
                    </div>
                    <div class="tab-pane active in" id="home">



                    </div>

                </div>

            </div>
            <footer>
                <hr>

                <p class="pull-right">Collect from <a href="#" title="网页模板" >sxddd</a></p>


                <p>&copy; 2019 <a href="#" >Portnine</a></p>
            </footer>

        </div>
    </div>
</div>
<!-- 使用ue -->
<script type="text/javascript">

//    $("#j_upload_img_btn").click(function () {
//        alert(1);
//
//    })

    // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
    var uploadEditor = UE.getEditor('content', {
        isShow: false,
        focus: false,
        enableAutoSave: false,
        autoSyncData: false,
        autoFloatEnabled: false,
        wordCount: false,
        sourceEditor: null,
        scaleEnabled: true,
        toolbars: [["insertimage", "attachment"]],
        initialFrameHeight: 500, //初始化高度

    });
//    editor.ready(function (editor) {
//        editor.setContent('初始化完毕');
//    });

    // 监听多图上传和上传附件组件的插入动作
    uploadEditor.ready(function () {
        uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
        uploadEditor.addListener("afterUpfile", _afterUpfile);
    });
//
    // 自定义按钮绑定触发多图上传和上传附件对话框事件
    document.getElementById('j_upload_img_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("insertimage");
        dialog.title = '多图上传';
        dialog.render();
        dialog.open();
    };


    $("#j_upload_file_btn").click(function () {
        var dialog = uploadEditor.getDialog("attachment");
        dialog.title = '附件上传';
        dialog.render();
        dialog.open();
    })
    // 多图上传动作
    function _beforeInsertImage(t, result) {
        var imageHtml = '';
        for (var i in result) {
            imageHtml += '<li><img src="' + result[i].src + '" alt="' + result[i].alt + '" style="width: 100px;height:100px;"></li>';
        }
        document.getElementById('upload_img_wrap').innerHTML = imageHtml;
    }

    // 附件上传
    function _afterUpfile(t, result) {
        var fileHtml = '';
        for (var i in result) {
            fileHtml += '<li><a href="' + result[i].url + '" target="_blank">' + result[i].url + '</a></li>';
        }
        document.getElementById('upload_file_wrap').innerHTML = fileHtml;
    }
</script>
